<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar title="简书头条" fixed />
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" :disabled='finished' @refresh="onRefresh">
      <!-- 上拉加载组件 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- 组件artictiv -->
        <ArticleInfo v-for="item in artlist" :key='item.id' :title='item.title' :author='item.aut_name' :cmtCount='item.comm_count' :dat='item.pubdate' :cover="item.cover"></ArticleInfo>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入axios
import { getArticleListAPI } from '@/api/articleAPI.js'
// 导入articieInfo组件
import ArticleInfo from '@/components/Article/ArticleInfo.vue'

export default {
  data() {
    return {
      // 页码值
      page: 1,
      // 每页显示多少条数据
      limit: 10,
      artlist: [],
      // 是否正在加载下一页数据
      loading: true,
      // 所以数据是否加载完毕，如果没有更多数据，一定把finished改成true
      finished: false,
      // 是否正在下拉刷新
      isLoading: false
      //
    }
  },
  components: {
    ArticleInfo
  },
  created() {
    this.initArticeleList()
  },
  methods: {
    //isRefresh来判断是否是上拉还是下拉true是下拉
    async initArticeleList(isRefresh) {
      //发去get请求获取列表数据
      const { data: res } = await getArticleListAPI(this.page, this.limit)
      // console.log(res)
      if (isRefresh) {
        this.artlist = [...res, ...this.artlist]
        this.isLoading = false
      } else {
        // 上拉加载
        this.artlist = [...this.artlist, ...res]
        this.loading = false
      }

      if (res.length === 0) {
        // 没有数据啦
        this.finished = true
      }
    },
    // 只要loLoad被调用，就应该请求下一页数据

    onLoad() {
      // 页码值值加一
      this.page++
      this.initArticeleList()
    },
    // 触发啦下拉刷新
    onRefresh() {
      console.log('下拉刷新')
      // 页码值加一
      //  重新请求接口获取数据
      this.page++
      this.initArticeleList(true)
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;
  /deep/.van-nav-bar__content {
    background-color: #007bff;
  }
  /deep/.van-nav-bar__title {
    color: #fff;
  }
}
</style>